<template>
  <div class="chart-container">
    <el-row :gutter="0">
      <el-col :span="4">
        <div :style="getAvailableHeight">
          <div class="border-container" style="height: 50%;">
            <div>
              自产供水量
            </div>
            <div>
              {{ waterBalanceFixedData ? waterBalanceFixedData.selfflow : 0 }} m³
            </div>
          </div>
          <div class="border-container" style="height:50%;">
            <div>
              外购供水量
            </div>
            <div>
              {{ waterBalanceFixedData ? waterBalanceFixedData.buyflow : 0 }} m³
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="border-container" :style="getAvailableHeight">
          <div>
            供水总量
          </div>
          <div>
            {{ waterBalanceFixedData ? waterBalanceFixedData.totalflow : 0 }} m³
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div :style="getAvailableHeight">
          <div class="border-container" style="height: calc(100% / 12 * 4);">
            <div>
              注册用户用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.userflow : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100% / 12 * 8);">
            <div>
              漏损水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.totalleakage2 : 0
              }} m³
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div :style="getAvailableHeight">
          <div class="border-container" style="height: calc(100% / 12 * 2);">
            <div>
              计费用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? (waterBalanceFixedData.chargeflowJl + waterBalanceFixedData.chargeflowWjl).toFixed(2) : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100% / 12 * 2);">
            <div>
              免费用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? (waterBalanceFixedData.freeflowJl + waterBalanceFixedData.freeflowWjl).toFixed(2) : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100% / 12 * 4);">
            <div>
              漏失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.totalleakage1 : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100% / 12 * 2);">
            <div>
              计量损失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.cleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100% / 12 * 2);">
            <div>
              其他损失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.wleakage : 0
              }} m³
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div :style="getAvailableHeight">
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              计费计量用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.chargeflowJl : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              计费未计量用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.chargeflowWjl : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              免费计量用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.freeflowJl : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              免费未计量用水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.freeflowWjl : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              明漏水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.mleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              暗漏水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.aleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              背景漏失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.backleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              水箱、水池的渗漏和溢流水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.sleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              居民用户总分表差损失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.jleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12);">
            <div>
              非居民用户表具误差损失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.fleakage : 0
              }} m³
            </div>
          </div>
          <div class="border-container" style="height: calc(100%  / 12 * 2);">
            <div>
              未注册用户用水和用户拒查等管理因素导致的损失水量
            </div>
            <div>
              {{
                waterBalanceFixedData ? waterBalanceFixedData.wleakage : 0
              }} m³
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WaterBalanceAnalysis',
  data() {
    return {
      screenHeight: null,
      waterBalanceFixedData: null,
    }
  },
  methods: {
    resizeCharts(height) {
      this.screenHeight = height
    },
    updateWaterBalanceFixedData(data) {
      this.waterBalanceFixedData = data
    }
  },
  computed: {
    getAvailableHeight() {
      const h = this.screenHeight - 528
      return {height: h + 'px'}
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
}
</script>

<style scoped lang="scss">
.chart-container {
  margin-top: 10px;
}

.border-container {
  border: 1px solid #E3E3E3;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  div {
    height: 18px;
    line-height: 18px;

    &:nth-child(2) {
      color: #1890ff;
    }
  }
}
</style>
